<template>
  <view class="goods-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <uni-search-bar
          placeholder="搜索商品名称、规格、描述"
          :clearButton="true"
          :cancelButton="true"
          @confirm="onSearch"
          @input="onSearchInput"
          v-model="searchKeyword"
      />
    </view>

    <!-- 商品列表 -->
    <view class="goods-list" v-if="filteredGoods.length > 0">
      <uni-list>
        <uni-swipe-action>
          <uni-swipe-action-item
              v-for="(item, index) in filteredGoods"
              :key="item.id"
              :right-options="swipeOptions"
              @click="onSwipeClick"
          >
            <uni-list-item
                :title="item.name"
                :note="item.description"
                :thumb="item.image"
                :rightText="'¥' + item.price"
                :showArrow="false"
                clickable
                @click="onItemClick(item)"
            >
              <template v-slot:footer>
                <text class="spec-text">{{ item.specs }}</text>
                <text class="store-text">{{ item.storeName }}</text>
              </template>
            </uni-list-item>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </uni-list>
    </view>

    <!-- 空状态提示 -->
    <view class="empty-state" v-else>
      <uni-icons type="shop" size="60" color="#ccc" />
      <text class="empty-text">暂无商品数据</text>
      <text class="empty-subtext">点击下方按钮添加商品</text>
    </view>

    <!-- 悬浮管理按钮 -->
    <uni-fab
        :pattern="fabPattern"
        horizontal="right"
        vertical="bottom"
        :content="fabContent"
        @trigger="onFabTrigger"
    />

    <!-- 新增/编辑弹窗 -->
    <uni-popup ref="popup" type="center">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">{{ isEditing ? '编辑商品' : '新增商品' }}</text>
          <uni-icons type="close" size="24" @click="closePopup" />
        </view>

        <view class="form-container">
          <view class="form-item">
            <text class="label">商品名称</text>
            <input class="input" v-model="formData.name" placeholder="请输入商品名称" />
          </view>

          <view class="form-item">
            <text class="label">商品价格</text>
            <input class="input" v-model="formData.price" type="number" placeholder="请输入价格" />
          </view>

          <view class="form-item">
            <text class="label">商品规格</text>
            <input class="input" v-model="formData.specs" placeholder="请输入规格" />
          </view>

          <view class="form-item">
            <text class="label">商品描述</text>
            <textarea class="textarea" v-model="formData.description" placeholder="请输入商品描述" />
          </view>

          <view class="form-item">
            <text class="label">关联店铺</text>
            <picker class="picker" :range="stores" range-key="name" @change="onStoreChange">
              <view class="picker-value">
                {{ formData.storeName || '请选择关联店铺' }}
              </view>
            </picker>
          </view>

          <view class="form-item">
            <text class="label">商品图片</text>
            <uni-file-picker
                v-model="formData.image"
                fileMediatype="image"
                mode="grid"
                :limit="1"
            />
          </view>
        </view>

        <view class="popup-actions">
          <button class="btn-cancel" @click="closePopup">取消</button>
          <button class="btn-confirm" @click="saveGoods">保存</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      goodsList: [
        {
          id: 1,
          name: '经典拿铁',
          price: '28.00',
          specs: '大杯',
          description: '香醇拿铁咖啡',
          image: '/static/c1.png',
          storeName: '星巴克旗舰店',
          storeId: 1
        },
        {
          id: 2,
          name: '美式咖啡',
          price: '25.00',
          specs: '中杯',
          description: '纯正美式风味',
          image: '/static/c2.png',
          storeName: '瑞幸咖啡',
          storeId: 2
        },
        {
          id: 3,
          name: '卡布奇诺',
          price: '32.00',
          specs: '大杯',
          description: '绵密奶泡口感',
          image: '/static/c3.png',
          storeName: '星巴克旗舰店',
          storeId: 1
        }
      ],
      stores: [
        { id: 1, name: '星巴克旗舰店' },
        { id: 2, name: '瑞幸咖啡' },
        { id: 3, name: 'COSTA咖啡' }
      ],
      swipeOptions: [
        {
          text: '编辑',
          style: {
            backgroundColor: '#007AFF'
          }
        },
        {
          text: '删除',
          style: {
            backgroundColor: '#DD524D'
          }
        }
      ],
      fabPattern: {
        color: '#fff',
        backgroundColor: '#007AFF',
        selectedColor: '#007AFF',
        buttonColor: '#007AFF'
      },
      fabContent: [
        {
          text: '新增商品',
          iconPath: '/static/icons/add.png',
          selectedIconPath: '/static/icons/add-active.png'
        },
        {
          text: '导入商品',
          iconPath: '/static/icons/import.png',
          selectedIconPath: '/static/icons/import-active.png'
        },
        {
          text: '导出商品',
          iconPath: '/static/icons/export.png',
          selectedIconPath: '/static/icons/export-active.png'
        }
      ],
      formData: {
        id: null,
        name: '',
        price: '',
        specs: '',
        description: '',
        image: '',
        storeId: null,
        storeName: ''
      },
      isEditing: false,
      currentEditIndex: -1
    }
  },
  computed: {
    filteredGoods() {
      if (!this.searchKeyword) {
        return this.goodsList
      }
      const keyword = this.searchKeyword.toLowerCase()
      return this.goodsList.filter(item =>
          item.name.toLowerCase().includes(keyword) ||
          item.specs.toLowerCase().includes(keyword) ||
          item.description.toLowerCase().includes(keyword) ||
          item.storeName.toLowerCase().includes(keyword)
      )
    }
  },
  methods: {
    onSearch(e) {
      console.log('搜索关键词:', e.value)
    },
    onSearchInput(e) {
      this.searchKeyword = e
    },
    onSwipeClick(e) {
      const { index, content, position } = e
      if (position === 'right') {
        if (content.text === '编辑') {
          this.editGoods(index)
        } else if (content.text === '删除') {
          this.deleteGoods(index)
        }
      }
    },
    onItemClick(item) {
      uni.showToast({
        title: `查看商品: ${item.name}`,
        icon: 'none'
      })
    },
    onFabTrigger(e) {
      const { index, item } = e
      switch (index) {
        case 0: // 新增商品
          this.showAddPopup()
          break
        case 1: // 导入商品
          this.importGoods()
          break
        case 2: // 导出商品
          this.exportGoods()
          break
      }
    },
    showAddPopup() {
      this.resetForm()
      this.isEditing = false
      this.$refs.popup.open()
    },
    editGoods(index) {
      const item = this.goodsList[index]
      this.formData = { ...item }
      this.isEditing = true
      this.currentEditIndex = index
      this.$refs.popup.open()
    },
    deleteGoods(index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个商品吗？',
        success: (res) => {
          if (res.confirm) {
            this.goodsList.splice(index, 1)
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
          }
        }
      })
    },
    onStoreChange(e) {
      const index = e.detail.value
      const store = this.stores[index]
      this.formData.storeId = store.id
      this.formData.storeName = store.name
    },
    saveGoods() {
      if (!this.formData.name || !this.formData.price) {
        uni.showToast({
          title: '请填写商品名称和价格',
          icon: 'none'
        })
        return
      }

      if (this.isEditing) {
        // 更新商品
        this.goodsList[this.currentEditIndex] = { ...this.formData }
        uni.showToast({
          title: '更新成功',
          icon: 'success'
        })
      } else {
        // 新增商品
        const newGoods = {
          ...this.formData,
          id: Date.now()
        }
        this.goodsList.unshift(newGoods)
        uni.showToast({
          title: '添加成功',
          icon: 'success'
        })
      }

      this.closePopup()
    },
    importGoods() {
      uni.showToast({
        title: '导入功能开发中',
        icon: 'none'
      })
    },
    exportGoods() {
      uni.showToast({
        title: '导出功能开发中',
        icon: 'none'
      })
    },
    resetForm() {
      this.formData = {
        id: null,
        name: '',
        price: '',
        specs: '',
        description: '',
        image: '',
        storeId: null,
        storeName: ''
      }
    },
    closePopup() {
      this.$refs.popup.close()
    }
  }
}
</script>

<style scoped lang="scss">
.goods-container {
  padding-bottom: 100px;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.search-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.goods-list {
  margin-top: 10px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;
  text-align: center;
}

.empty-text {
  font-size: 16px;
  color: #999;
  margin-top: 20px;
}

.empty-subtext {
  font-size: 14px;
  color: #ccc;
  margin-top: 10px;
}

.spec-text {
  font-size: 12px;
  color: #666;
  margin-right: 8px;
}

.store-text {
  font-size: 12px;
  color: #007AFF;
}

.popup-content {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 80vw;
  max-width: 400px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.form-item {
  margin-bottom: 15px;
}

.label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.input, .textarea, .picker-value {
  width: 92%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
}

.textarea {
  height: 80px;
  resize: none;
}

.picker-value {
  color: #333;
}

.popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.btn-cancel, .btn-confirm {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  border: none;
}

.btn-cancel {
  background: #f0f0f0;
  color: #666;
}

.btn-confirm {
  background: #007AFF;
  color: #fff;
}
</style>